<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__user">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
		  <el-form-item>
		    <el-input size="mini" v-model="dataForm.tableName" :placeholder="$t('tableName')" clearable></el-input>
		  </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>
	  
	  
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%;">
        <el-table-column type="index" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="tableName" :label="$t('tableName')"  header-align="center" align="center"></el-table-column>
		<el-table-column prop="engine" :label="$t('engine')"  header-align="center" align="center"></el-table-column>
		<el-table-column prop="tableCollation" :label="$t('tableCollation')" header-align="center" align="center"></el-table-column>
		<el-table-column prop="tableComment" :label="$t('remark')"  header-align="center" align="center"></el-table-column>
        <el-table-column prop="createTime" :label="$t('createTime')"  header-align="center" align="center" width="180"></el-table-column>
		<el-table-column prop="updateTime" :label="$t('updateTime')"  header-align="center" align="center" width="180"></el-table-column>
		<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="220">
		  <template slot-scope="scope">
		    <el-button v-if="$hasPermission('dbManage:column')" type="text"  @click="showZdTable(scope.row)">{{ $t('field') }}</el-button>
			
			<el-button v-if="$hasPermission('dbManage:modifyTableConfig')" type="text" @click="childHandle(scope.row)">{{ $t('配置') }}</el-button>
			
			<el-button v-if="$hasPermission('dbManage:preview')" type="text" @click="previewHandle(scope.row,1)">{{ $t('预览') }}</el-button>
			
			<el-button v-if="$hasPermission('dbManage:gen')" type="text" @click="previewHandle(scope.row,2)">{{ $t('生成') }}</el-button>
			
			<el-button v-if="$hasPermission('dbManage:downLoadCode')" type="text" @click="previewHandle(scope.row,3)">{{ $t('下载') }}</el-button>
			
		  </template>
		</el-table-column>
		
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
     
	  
	  <!-- 字段列表 -->
	  <el-dialog customClass="customWidth" :title="zdListTitle" :visible.sync="showZdList" @closed="closeZdList()">
	    <el-table max-height="600" :data="zdList" border  >
			<template slot="empty">
			    <el-empty :image-size="100" :description="zdListEmpty"></el-empty>
		    </template>
			<el-table-column property="columnName" header-align="center" align="center" :label="$t('database.columnName')" min-width="150px"></el-table-column>
			<el-table-column prop="columnType" :label="$t('database.dataType')"  header-align="center" align="center"></el-table-column>
			<el-table-column property="columnKey" header-align="center" align="center" :label="$t('database.columnKey')" min-width="60"></el-table-column>
			<el-table-column show-overflow-tooltip property="columnDefault" header-align="center" align="center" :label="$t('database.columnDefault')" min-width="120"></el-table-column>
			<el-table-column property="extra" header-align="center" align="center" :label="$t('database.extra')" min-width="150"></el-table-column>
			<el-table-column property="isNullable" header-align="center" align="center" :label="$t('database.isNullable')" min-width="60"></el-table-column>
			<el-table-column  property="columnComment" header-align="center" align="center" :label="$t('database.columnComment')" min-width="150"></el-table-column>
	      </el-table>
	  </el-dialog>
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  
	  <el-dialog :visible.sync="showReview" width="80%"  top="3vh">
		
		<el-tabs v-model="activeName" type="card" v-loading="reviewLoadding"  element-loading-text="拼命加载中">
			<div style="height: 60px;" v-if="reviewLoadding">
				<!-- 这个用来处理拼命加载中的位置问题 -->
			</div>
		    <el-tab-pane v-for="item in preCodes" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
		      <Java :value="item.content" :height="height" />
		    </el-tab-pane>
		  </el-tabs>
		
	  </el-dialog>
	  
	  
	  
	  
    </div>
  </el-card>
  
  
  
  
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { addDynamicRoute } from '@/router'
import Java from '../../../components/JavaEdit/index.vue'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/pc/database/list',
        getDataListIsPage: true,
        deleteURL: '/pc/database/del',
        // deleteIsBatch: true
      },
	  showZdList: false,
	  zdList: [],
	  zdListEmpty: '查询字段中...',
	  zdListTitle: '字段',
      dataForm: {
        tableName: ''
      }
	  
	  ,reviewLoadding: false
	  ,showReview:false
	  ,preCodes: null
	  ,height: (window.innerHeight - 235) + ''
	  ,activeName: 'Entity'
	  
    }
  }
  ,mounted(){
      // this.getRoleList()
	  // this.initHasModiyStatus()
  }
  ,components: {
	  Java
  },
  methods:{
	  showZdTable(obj) {
		  this.showZdList = true;
		  var p = {
			  tableName: obj.tableName
		  }
		  this.zdListTitle = obj.tableName + ' ' + this.$t('field') 
		  return this.$http.post('/pc/database/column',p).then(({ data: res }) => {
		    if (res.code !== 200) {
		      return this.$message.error(res.msg)
		    }
		  	this.zdList = res.data
			this.zdListEmpty = "暂无数据"
		  }).catch(() => {})
	  },
	  closeZdList(){
		  this.zdListTitle = this.$t('field')
		  this.zdList = []
		  this.zdListEmpty = "查询字段中..."
	  }
	  ,childHandle(r){
		  // 路由参数
		  const routeParams = {
		    routeName: '代码配置'+`__${r.tableName}`,
		    title: '代码配置'+` - ${r.tableName}`,
		    path: 'server/tableConfig',
		    params: {
		      tableName:r.tableName
		    }
		  }
		  // 动态路由
		  addDynamicRoute(routeParams, this.$router)
	  },
	  previewHandle(r,rt){
		  if( rt === 1 ){
			  this.showReview = true
			  this.reviewLoadding = true;
			  //查询
			  var p = { params:{ tableName:r.tableName } }
			  return this.$http.get('/pc/database/preview',p).then(({ data: res }) => {
			    if (res.code !== 200) {
			  				this.showReview = false;
			  				this.reviewLoadding = false;
			  				return this.$message.error(res.msg)
			    }
			  			this.reviewLoadding = false;
			  	 this.preCodes = res.data
			  }).catch(() => {})
		  }else if( rt === 2 ){
			//确认框
			this.$confirm('是否生成  ‘' + r.tableName +  '’  代码？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message.success('生成中,请稍后...')
				var p = { params:{ tableName:r.tableName } }
				return this.$http.get('/pc/database/gen',p).then(({ data: res }) => {
				if (res.code !== 200) {
					return this.$message.error('生成'+res.msg)
				}
				return this.$message.success('生成'+res.msg)
			}).catch(() => {
				return this.$message.error('生成失败')
			})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消生成'
				  });   
			});
		  }else if( rt === 3 ){
			//确认框
			this.$confirm('是否下载  ‘' + r.tableName +  '’  代码？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message.success('生成中,请稍后...')
				var p = { params:{ tableName:r.tableName } }
				this.$http.get('/pc/database/downLoadCode',p).then(({ data:res }) => {
					const url = window.URL.createObjectURL(new Blob([res, {type: 'application/zip'}]))
					const link = document.createElement('a')
					link.style.display = 'none'
					link.href = url
					const fileName = new Date().valueOf() + '-' + r.tableName + '.zip'
					link.setAttribute('download', fileName)
					document.body.appendChild(link)
					link.click()
					document.body.removeChild(link)
				}).catch(() => {
					return this.$message.error('下载失败')
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消下载'
				  });   
			});
		  }
		 
	  }
  }
}
</script>


<style>
	/* 字段列表的弹框宽度 */
	.customWidth{
		width:65%;
	}
	
	/* 字段列表的滚动条;没有滚动条时不显示占位 Start */
	.el-table th.gutter{
		display: none;
		width:0
	}
	.el-table colgroup col[name='gutter']{
		display: none;
		width: 0;
	}
	.el-table__body{
		width: 100% !important;
	}
	/* 字段列表的滚动条;没有滚动条时不显示占位  END */	
</style>
